<template>
  <view class="page">
    <view class="header">
      <view class="info">
        <view class="avatar">
          <image :src="userInfo.headImg" mode="scaleToFill"></image>
        </view>
        <view class="username">{{ userInfo.userName }}</view>
        <view class="crown"> </view>
      </view>
      <view class="nav">
        <view class="nav_item" @click="switchPage('/pages/user/user')">
          我的
        </view>
        <view class="nav_item active"> 主页 </view>
        <view class="nav_item" @click="switchPage('/pages/examBook/examBook')">
          考试本
        </view>
        <view class="nav_item" @click="switchPage('/pages/ai/ai')">
          智能答疑
        </view>
      </view>
      <view class="logout" @click="logout">退出</view>
    </view>
    <view class="content">
      <view class="list">
        <view class="item" @click="switchPage('/pages/word/word')"> </view>
        <view class="item" @click="switchPage('/pages/nav/nav')"> </view>
        <view
          class="item"
          @click="switchPage('/pages/sentence/sentenceChoice')"
        >
        </view>
        <view class="item" @click="switchPage('/pages/read/read')"> </view>
        <view class="item" @click="switchPage('/pages/grammar/grammarDiagram')">
        </view>
        <view
          class="item"
          @click="switchPage('/pages/composition/composition')"
        >
        </view>
      </view>
      <view class="img">
        <image src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/index/animation.gif" mode="scaleToFill" />
      </view>
      <view class="word">
        <view class="word_img">
          <image src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/index/robot.gif" mode="scaleToFill" />
        </view>
        <view
          class="word_iocn"
          @click="switchPage('/pages/newwordsBook/newwordsBook')"
        >
          <text>生词本:{{ newwordsNum }}个</text>
        </view>
      </view>
    </view>
    <view class="date">
      <view class="date_num">
        <view
          v-for="(item, index) in splitNumber(userInfo.expireDay)"
          :key="index"
        >
          {{ item }}
        </view>
      </view>
      <view class="date_unit">天</view>
    </view>
  </view>
</template>

<script>
import { getScsl } from "@/api/sync";
import { getStore } from "@/libs/storage";
export default {
  components: {},
  data() {
    return {
      userInfo: {},
      newwordsNum: 0,
      evaluationCount: 0,
      ratio: 1,
    };
  },
  onShow() {
    this.userInfo = getStore({
      name: "userInfo",
    });
    this.init();
  },
  methods: {
    init() {
      getScsl().then((res) => {
        this.newwordsNum = res.data;
      });
    },
    switchPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
    logout() {
      uni.showModal({
        title: "温馨提示",
        content: "你确定要退出登录吗？",
        success: (res) => {
          if (res.confirm) {
            this.$store.dispatch("LogOut").then(() => {
              uni.reLaunch({
                url: "/pages/login/login",
              });
            });
          }
        },
      });
    },
    splitNumber(n) {
      return String(n).split("").map(Number);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index";
</style>
